/*
 * @Description: 优惠券弹窗
 * @Author: ziwei.ma
 * @Date: 2019-05-21 11:33:40
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-05-23 18:46:46
 */
<template>
  <mask-module
    ref="mask"
    class="flex-h flex-vc flex-hc"
    :isClickBgToHide="true"
  >
    <div class="coupon-box-wrapper">
      <!-- 标题 -->
      <div class="coupon-box-title fontsize34">店铺优惠券</div>
      <!-- 优惠券列表 -->
      <div class="coupon-list-wrapper ">
        <div
          @click="selectedCoupons(index)"
          class="coupon-list fontsize32 flex-h flex-hsb"
          v-for="(option,index) in isCouponsList"
          :key="index"
        >
          <div>{{option.couponsName}}</div>
          <span
            class="coupon-selected icon iconfont icon-choose"
            :class="[option.couponsState?'baseBgColorNoActive':'coupon-unselected']"
          ></span>
        </div>
      </div>
      <!-- 按钮 -->
      <div
        class="comfirm-btn baseBgColorNoActive fontsize32"
        @click="clickComfirmBtn"
      >确定</div>
    </div>
  </mask-module>
</template>

<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
export default {
  components: {
    'mask-module': AnimatedDialog
  },
  data() {
    return {
    }
  },
  props: {
    // 获取由父组件传回的优惠券列表
    isCouponsList: ''
  },
  computed: {
    mask() {
      return this.$refs.mask
    }
  },
  methods: {
    show() {
      this.mask.show()
    },
    hide() {
      this.mask.hide()
    },
    selectedCoupons(index) {
      this.isCouponsList[index].couponsState = true
      this.$emit('setCouponIndex', index)
    },
    clickComfirmBtn() {
      this.hide()
    }
  }
}
</script>

<style scoped>
.coupon-box-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 750px;
  height: 700px;
  background-color: #ffffff;
}
/* 优惠券弹窗标题 */
.coupon-box-title {
  text-align: center;
  height: 120px;
  line-height: 120px;
}

/* 优惠券列表 */

.coupon-list-wrapper {
  padding: 0 40px;
  width: 670px;
  height: 482px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.coupon-list {
  height: 140px;
  line-height: 140px;
  border-top: 1px solid #eeeeee; /*no*/
}
.coupon-selected {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-sizing: border-box;
  margin: auto 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
}
.coupon-unselected {
  border: 1px solid #cccccc; /*no*/
}
/* 确认按钮 */
.comfirm-btn {
  height: 98px;
  line-height: 98px;
  text-align: center;
  color: #ffffff;
}
</style>
